$(function () {
    //遇到 需要把 header.html 加载完成后,才执行某一些函数 ?
    // 
    $(".header").load("./header.html", function () {
        // alert("header.html,页面加载完成了,就,我才执行");
        // 等到 header页面 加载,才能让某一些 js生效
        $(".nav_list").show();
        


        // 透明轮播图
        $(function () {
            // 当前播放的图片的序号
            let ord = 0;
            // 定义定时器
            let myTimer = null;
            var $oUlli = $("#oul>li");
            var $oOlli = $("#ool>li");
            function autoPlay() {
                myTimer = setInterval(function () {
                    // 跳转到下一张图片上
                    goImg(ord + 1);
                }, 2000);
            }

            // 跳转到指定的图片上（transOrd就是要跳转的图片的序号）
            function goImg(transOrd) {
                // 一、数据的合法性处理
                // 1、健壮性
                if (transOrd == ord) {
                    return; //结束函数执行
                }

                // 二、逻辑
                // 1、数据处理
                // outOrd是淡出的图片序号，transOrd是要淡入的图片序号（即：跳转的图片序号）
                let outOrd = ord;
                ord = transOrd;

                // 2、边界处理
                if (ord > $oUlli.length - 1) {
                    ord = 0;
                } else if (ord < 0) {
                    ord = $oUlli.length - 1;
                }

                //3、外观：
                // 3.1）、让一张图片淡出，一张图片淡入
                $oUlli.eq(outOrd).animate({ "opacity": 0 }, 1000);
                $oUlli.eq(ord).animate({ "opacity": 1 }, 1000);
                // 3.2）、变豆豆
                $oOlli.eq(outOrd).css({ "background-color": "#000" });
                $oOlli.eq(ord).css({ "background-color": "#FF0000" });

            }

            function stopPlay() {
                window.clearInterval(myTimer);
                myTimer = null;
            }

            $(function () {
                //1、自动播放
                autoPlay();

                //2、点击豆豆跳转到对应的图片上
                $("#box>ol>li").on("click", function () {
                    stopPlay();
                    goImg($(this).index());
                });

                //3、鼠标放入停止
                $("#box").on("mouseover", function () {
                    $(".swiper_button").css({ "display": "block" })
                    stopPlay();
                });

                //4、鼠标离开继续播放    
                $("#box").on("mouseout", function () {
                    $(".swiper_button").css({ "display": "none" })
                    autoPlay();
                });

                //5、左右箭头
                let $div = $(".swiper_button");
                console.log($div)
                // 左箭头
                $div.eq(0).on("click", function () {
                    stopPlay();
                    goImg(ord - 1);
                });
                // 右箭头
                $div.eq(1).click(function () {
                    stopPlay();
                    goImg(ord + 1);
                });

            })
        })



        //渲染数据
        $(function () {
            axios.interceptors.request.use(function (config) {
                config.baseUrl = "http://127.0.0.1:8080";
                //发送之前,读取token
                config.headers.token = localStorage.getItem("token")
                return config;
            });

            axios({
                url: "/api/index",
                method: "get",
            }).then(function (res) {
                console.log(res);


                var htmlStr = ``;
                [...res.data.data].forEach(function (el) {
                    htmlStr += `<li><a href="./detailgood.html?gid=${el.id}">
                         <img src="${el.img}" alt="">
                         <div class="con_span">
                             <span class="content_span1">${el.name}</span>
                             <span class="content_span2"><em>${el.price}</em>元</span>
                         </div></a></li>`
                })
                $(".content_ul1").html(htmlStr)
            })
        })



        // 点击左右移动
        $(function () {
            $(".dztj-box .tit_btn1").on("click", function () {
                // console.log("111")
                $(".dztj-box ul.swiper_box").animate({ left: "-1200px" }, "slow");
                $(".dztj-box .tit_btn1").css({ "opacity": .3 }).siblings().css({ "opacity": 1 })
            })
            $(".dztj-box .tit_btn2").on("click", function () {
                $(".dztj-box ul.swiper_box").animate({ left: "0px" }, "slow");
                $(".dztj-box .tit_btn2").css({ "opacity": .3 }).siblings().css({ "opacity": 1 })
            })
        })


        // 固定顶部
        $(function () {
            $(document).scroll(function () {
                var $scrollTop = $(this).scrollTop();
                // console.log($scrollTop);
                if ($scrollTop > 800) {
                    $("#fixedSch").css({ "position": "fixed", "top": 0, 'display': 'block', "zIndex": 999 });
                    // $("#content").css({marginTop:$("#fixedSch").height()});
                } else {
                    $("#fixedSch").css({ 'position': 'fixed', 'display': 'none' });
                    // $("#content").css({marginTop:0});
                }
            })

        })
    })
    $(".footer").load("./footer.html")


})




